<!-- eslint-disable eqeqeq -->
<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="under">
      <!-- 表格渲染 -->
      <el-card style="padding:10px 0">
        <el-button
          type="warning"
          style="margin-bottom:20px"
          @click="openDialog('add')"
        >新增模板</el-button>
        <el-table
          :data="freightList"
          fit
          style="width: 100%"
          :header-cell-style="{ background: 'rgba(250,252,255,1)' }"
        >
          <el-table-column
            prop="templateType"
            label="模板类型"
            :formatter="formatTemplateType"
          >
          </el-table-column>
          <el-table-column
            prop="transportType"
            label="运送类型"
            :formatter="formatTransportType"
          >
          </el-table-column>
          <el-table-column
            prop="associatedCityList"
            label="关联城市"
            width="285"
            :formatter="associatedCityLisType"
          >
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
          >
          </el-table-column>
          <el-table-column
            prop="continuousWeight"
            label="续重"
          >
          </el-table-column>
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
          >
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template #default="{row}">
              <el-button
                type="text"
                @click="openDialog('edit',row)"
              >编辑</el-button>
              <div style="display: inline-block;vertical-align: middle;color:#E3E3E3">|</div>
              <el-button
                type="text"
                style="color: #F56C6C ;"
                @click="prepareDelete(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 对话框 -->
      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <el-form
            ref="dialogForm"
            :model="dialogForm"
            :rules="rules"
            label-width="100px"
          >
            <el-form-item
              label="模板类型"
              prop="templateType"
              style="margin-left: 10px;"
            >
              <el-select
                v-model="dialogForm.templateType"
                placeholder="请选择模板类型"
                style="width: 100%;"
              >
                <el-option
                  label="同城寄"
                  value="1"
                >
                </el-option>
                <el-option
                  label="省内寄"
                  value="2"
                >
                </el-option><el-option
                  label="经济区互寄"
                  value="3"
                >
                </el-option><el-option
                  label="跨省"
                  value="4"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="运送类型"
              prop="transportType"
              style="margin-left: 10px;"
            >
              <el-select
                v-model="dialogForm.transportType"
                placeholder="请选择运送类型"
                style="width: 100%;"
              >
                <el-option
                  label="普快"
                  value="1"
                >
                </el-option>
                <el-option
                  label="特快"
                  value="2"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="关联城市"
              prop="associatedCityList"
              style="margin-left: 10px;"
            >
              <el-checkbox-group v-model="dialogForm.associatedCityList">
                <el-checkbox
                  label="1"
                  name="associatedCityList"
                >全国</el-checkbox>
                <el-checkbox
                  label="2"
                  name="associatedCityList"
                >京津翼</el-checkbox><el-checkbox
                  label="3"
                  name="associatedCityList"
                >江浙沪</el-checkbox><el-checkbox
                  label="4"
                  name="associatedCityList"
                >川渝</el-checkbox>
                <el-checkbox
                  label="5"
                  name="associatedCityList"
                >黑吉辽</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item
              label="首重价格"
              prop="firstWeight"
            >
              <el-input v-model="dialogForm.firstWeight"></el-input>
            </el-form-item><el-form-item
              label="续重价格"
              prop="continuousWeight"
            >
              <el-input v-model="dialogForm.continuousWeight"></el-input>
            </el-form-item><el-form-item
              label="轻抛系数"
              prop="lightThrowingCoefficient"
            >
              <el-input v-model="dialogForm.lightThrowingCoefficient"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="handleClose">取 消</el-button>

          <el-button
            type="danger"
            @click="confirm"
          >确 定</el-button>
        </span>
      </el-dialog>

      <!-- 删除弹窗 -->
      <el-dialog
        title="确认删除"
        :visible.sync="dialogVisible1"
        width="30%"
      >
        <span style="margin-left: 32px;">确定要删除吗</span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible1 = false">取 消</el-button>
          <el-button
            type="danger"
            @click="handleDelete"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getFreightListAPI, addFreightAPI, deleteFreightAPI } from '@/api/freight'

export default {
  data() {
    return {
      rules: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '模板类型不能为空', trigger: 'change' }
        ],
        associatedCityList: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'change' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'change' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'change' }
        ]
      },
      dialogForm: {
        associatedCityList: [] // 添加一个空数组作为初始值
      },
      dialogVisible: false,
      dialogVisible1: false,
      dialogTitle: '',
      // 表格数据
      freightList: [],
      deleteId: ''
    }
  },
  mounted() {
    this.getFreightList()
  },
  methods: {
    // 准备删除
    prepareDelete(id) {
      this.deleteId = id
      this.dialogVisible1 = true
    },
    // 删除运费模板
    async handleDelete() {
      const res = await deleteFreightAPI(this.deleteId)
      console.log(res)
      this.$message.success('删除成功')
      this.getFreightList()
      this.dialogVisible1 = false
    },
    // 关闭弹窗
    handleClose() {
      this.getFreightList()
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
      this.dialogForm = {
        associatedCityList: [] // 添加一个空数组作为初始值
      }
    },
    handleTemplate(row) {
      const MAP = {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      }
      return MAP[row.templateType]
    },
    // 模板类型格式化
    formatTemplateType(row) {
      const MAP = {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      }
      return MAP[row.templateType]
    },
    // 运送类型格式化
    formatTransportType(row) {
      const MAP = {
        1: '普快',
        2: '特快'
      }
      return MAP[row.transportType]
    },
    // 关联城市格式化
    associatedCityLisType(row) {
      const arr = []
      if (row.associatedCityList.includes('1')) arr.push('全国')
      if (row.associatedCityList.includes('2')) arr.push('京津冀')
      if (row.associatedCityList.includes('3')) arr.push('江浙沪')
      if (row.associatedCityList.includes('4')) arr.push('川渝')
      if (row.associatedCityList.includes('5')) arr.push('黑吉辽')
      return arr.join(',')
    },
    // 处理确认按钮
    confirm() {
      this.$refs.dialogForm.validate(async valid => {
        if (valid) {
          // 表单验证通过
          // 在这里执行你想要的操作
          await addFreightAPI(this.dialogForm)
          this.$message.success('操作成功')
          this.handleClose()
          this.getFreightList()
        } else {
          // 表单验证不通过
          this.$message.error('请补全内容')
        }
      })
    },
    // 处理打开弹窗
    openDialog(diaLogType, form) {
      if (diaLogType === 'add') this.dialogTitle = '新增模版'
      if (diaLogType === 'edit') {
        this.dialogTitle = '编辑模版'
        form.templateType = String(form.templateType)
        form.transportType = String(form.transportType)
        this.dialogForm = form
      }
      this.dialogVisible = true
    },
    // 获取表格数据 运费管理
    async getFreightList() {
      const res = await getFreightListAPI()
      console.log(res)
      this.freightList = res.data
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
  .under {
    margin: 0 20px;
  }
}

::v-deep .el-dialog__close:hover {
  color: #000;
}

::v-deep .el-form-item__label {
  font-weight: 500;
}

::v-deep .el-dialog__footer {
  text-align: center;
}

::v-deep .el-table_1_column_7 {
  text-align: center;
}

::v-deep .el-dialog__body {
  padding: 20px 40px 20px 50px;
}
</style>
